Description

Description:

Ensures that the theme selection persists across page reloads using localStorage.
Fixes the theme toggle button to correctly display:
Improves logic by checking localStorage on component mount and applying the correct theme class to document.documentElement.

Related Issues

#1187

Changes Proposed

const [theme, setTheme] = useState("dark");

 useEffect(() => {
   const savedTheme =
     typeof window !== "undefined" ? localStorage.getItem("theme") : "dark";
   if (savedTheme) {
     setTheme(savedTheme);
     document.documentElement.classList.toggle("dark", savedTheme === "dark");
   }
 }, []);

 function toggleTheme() {
   const newTheme = theme === "dark" ? "light" : "dark";
   setTheme(newTheme);
   if (typeof window !== "undefined") {
     localStorage.setItem("theme", newTheme);
   }
   document.documentElement.classList.toggle("dark", newTheme === "dark");
 }

When the page reloads, the component runs the useEffect hook, which:

Retrieves the stored theme from localStorage (if available).
Applies the saved theme by updating the theme state and toggling the "dark" class on document.documentElement.
This ensures that the theme remains consistent after a reload.

The toggleTheme function:

Switches between "dark" and "light".
Saves the new theme in localStorage.
Updates the document class accordingly.
As a result, the theme selection persists across sessions.

Checklist

• [*] I have read and followed the Contribution Guidelines.
• [*] All new and existing tests passed.
• [*] I have updated the documentation to reflect the changes I've made.
• [*] My code follows the code style of this project.
• [*] The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers